Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Upgrade to React 18 #1100

Merged
merged 20 commits into from
Aug 21, 2024
Merged

Upgrade to React 18 #1100

merged 20 commits into from
Aug 21, 2024

Conversation

jernestmyers
Copy link
Member

@jernestmyers jernestmyers commented May 20, 2024 •
edited
Loading

This PR upgrades our monorepo packages to React 18, largely by following this React guide.

@dmfalke
Copy link
Member

dmfalke commented Jun 27, 2024

Regarding ReactDOM.unmountComponentAtNode, this goes hand-in-hand with ReactDOM.render. Per https://react.dev/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis, you should be able to replace those instances with root.unmount(). This might involve adding an instance property to class based components, in order to keep track of root.

@dmfalke
Copy link
Member

dmfalke commented Jun 27, 2024 •
edited
Loading

As noted elsewhere, ReactDOM.findDOMNode is deprecated. In most cases, this can be replaced with a ref. This can be a follow-up task. Just noting here for posterity.

❯ rg findDOMNode -l
packages/libs/wdk-client/src/Components/InputControls/IndeterminateCheckbox.tsx
packages/libs/wdk-client/src/Components/Loading/Loading.tsx
packages/libs/wdk-client/src/Components/Overlays/Popup.tsx
packages/libs/wdk-client/src/Components/Display/Sticky.jsx
packages/libs/wdk-client/src/Controllers/LegacyParamController.tsx
packages/libs/wdk-client/src/Components/AttributeFilter/FieldList.jsx
packages/libs/wdk-client/src/Components/AttributeFilter/Histogram.jsx
packages/libs/wdk-client/src/Views/Answer/AnswerFilter.jsx
packages/libs/wdk-client/src/Views/Records/RecordUI.jsx

dmfalke
dmfalke requested changes Jun 27, 2024
View reviewed changes
Copy link
Member

@dmfalke dmfalke left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've reviewed the code changes, and it looks really great. I made some nitpicky suggestions, mostly related to keeping things as type-safe as possible. Let me know what you think!

packages/libs/components/src/plots/facetedPlots/FacetedPiePlot.tsx Show resolved Hide resolved
packages/libs/components/src/stories/widgets/DateInput.stories.tsx Show resolved Hide resolved
packages/libs/components/src/stories/widgets/DateRangeInput.stories.tsx Show resolved Hide resolved
packages/libs/components/src/stories/widgets/NumberInput.stories.tsx Show resolved Hide resolved
packages/libs/eda/src/lib/core/components/filter/HistogramFilter.tsx Outdated Show resolved Hide resolved
packages/libs/eda/src/lib/workspace/Variable.tsx Outdated Show resolved Hide resolved
packages/libs/wdk-client/src/Components/Display/CollapsibleSection.tsx Outdated Show resolved Hide resolved
packages/libs/web-common/src/controllers/LegacyMapRedirectHandler.tsx Outdated
@@ -81,7 +89,7 @@ export function LegacyMapRedirectHandler({
const additionalAnalysisConfig = {
...baseAdditionalAnalysisConfig,
...descriptorConfig,
};
} as AdditionalAnalysisConfig;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of using as, we should declare the type of the variable:

const additionalAnalysisConfig: AdditionalAnalysisConfig = {

This will require declare the components that make up this value (baseAdditionalAnalysisConfig, and descriptorConfig). I think this will reveal a subtle type conflict.

Generally, we should avoid as if possible, and document why we are using it if we need it. This isn't something we've really enforced before.

...ges/sites/genomics-site/webapp/wdkCustomization/js/client/components/Downloads/Downloads.tsx Outdated Show resolved Hide resolved
...ite/webapp/wdkCustomization/js/client/components/genomeSummaryView/EmptyChromosomeFilter.tsx Outdated Show resolved Hide resolved
@jernestmyers jernestmyers marked this pull request as ready for review July 29, 2024 18:04
@dmfalke
Copy link
Member

dmfalke commented Jul 30, 2024

This looks great. Let's plan to merge after the 68b release. I will set a reminder to approve.

@dmfalke
Copy link
Member

dmfalke commented Aug 15, 2024

Let's get this up-to-date w/ the latest from main and plan to merge soon.

@jernestmyers jernestmyers merged commit 441712e into main Aug 21, 2024
1 check passed
@jernestmyers jernestmyers deleted the upgrade-react branch August 21, 2024 14:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@dmfalke dmfalke dmfalke approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@jernestmyers @dmfalke